<template>
	<div class="xitongpeizhi">
    <left></left>
    <div class="right">
      <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/xitongpeizhi' }">系统管理</el-breadcrumb-item>
          <el-breadcrumb-item >已有云账户绑定</el-breadcrumb-item>
        </el-breadcrumb>
        <top></top>
      </div>
      <div style="padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
      
        <div class="flexc" style="font-size: 16px; font-weight: bold; margin-bottom: 20px;">
          <div><img src="../../../static/img/xitong4.png" style="width: 22px; margin-right: 10px;"></div>
          <div>已有云账户绑定</div>
        </div>
        <div class="baibeijing" style="  margin-bottom: 20px;">
          <!-- 新增 -->
          <div v-if="nowtype==1&&!isshowinfo">
            <div class="flexc t_item_info">
              <div class="yzh_title">平台企业ID</div><el-input v-model="upform.dealer_id" placeholder="请输入"  style="width: 360px; margin-right: 20px;"></el-input>
            </div>
            <div class="flexc t_item_info">
              <div class="yzh_title">综合服务主体ID</div><el-input  v-model="upform.broker_id" placeholder="请输入"  style="width: 360px; margin-right: 20px;"></el-input>
            </div>
            <div class="flexc t_item_info">
              <div class="yzh_title">App Key</div><el-input placeholder="请输入" v-model="upform.app_key" style="width: 360px; margin-right: 20px;"></el-input>
            </div>
            <div class="flexc t_item_info">
              <div class="yzh_title">3DES key</div><el-input placeholder="请输入" v-model="upform.des_key" style="width: 360px; margin-right: 20px;"></el-input>
            </div>
            <div class="flexc t_item_info">
              <div class="yzh_title">平台企业公钥</div><el-input v-model="upform.dealer_pub" placeholder="请输入" type="textarea" style="width: 360px; margin-right: 20px;"></el-input>
            </div>
            <div class="flexc t_item_info">
              <div class="yzh_title">云账户公钥</div><el-input v-model="upform.yun_pub" placeholder="请输入" type="textarea" style="width: 360px; margin-right: 20px;"></el-input>
            </div>
            <div style="padding-bottom: 30px;"><el-button type="primary" style="margin-top: 40px; width: 140px;" round @click="opentest" >绑定测试</el-button></div>
          </div>
          
          <!-- 查看 -->
          <div v-if="nowtype==2||isshowinfo">
            <!-- <div class="flexc t_item_info">
              <div class="yzh_title">当前绑定云账户：</div>
              <div>XXXXXXXXXX</div>
            </div> -->
            <div class="flexc t_item_info">
              <div class="yzh_title">平台企业ID：</div>
              <div>{{ upform.dealer_id }}</div>
            </div>
            <div class="flexc t_item_info">
              <div class="yzh_title">综合服务主体ID：</div>
              <div>{{ upform.broker_id }}</div>
            </div>
            <div class="flexc t_item_info">
              <div class="yzh_title">App Key：</div>
              <div>{{ upform.app_key }}</div>
            </div>
            <div class="flexc t_item_info">
              <div class="yzh_title">3DES key：</div>
              <div>{{ upform.des_key }}</div>
            </div>
          </div>
          <!-- <footers></footers> -->
        </div>
      </div>
    </div>
    <!-- 绑定成功 -->
    <el-dialog
      title="绑定成功"
      :visible.sync="isshowbindsuccess"
      :close-on-click-modal="false"
      width="440px">
      <div style="color: #AFB3BC;font-size: 14px;">云账户已成功绑定！</div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="isshowbindsuccess = false">取 消</el-button>
        <el-button round type="primary" @click="successclose">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 绑定失败 -->
    <el-dialog
      title="绑定失败"
      :visible.sync="isshowbindfail"
      :close-on-click-modal="false"
      width="440px">
      <div style="color: #AFB3BC;font-size: 14px;">{{ failmsg }}</div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="isshowbindfail = false">取 消</el-button>
        <el-button round type="primary" @click="isshowbindfail = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 绑定测试 -->
    <el-dialog
      title="绑定测试"
      :visible.sync="isshowbindtest"
      :close-on-click-modal="false"
      width="440px">
      <div style="color: #AFB3BC;font-size: 14px;">我们将会使用您的云账户打款1分钱到我们的个人账户，用来测试是否绑定成功，1分钱不会退款。请先确保云账户余额大于1分钱再点击测试</div>
      <span slot="footer" class="dialog-footer">
        <el-button round @click="isshowbindtest = false">取 消</el-button>
        <el-button v-if="!isnowtest" round type="primary" @click="baocunpeizhi">我同意，开始测试</el-button>
        <el-button v-else type="primary" round :loading="isnowtest">测试中</el-button>
      </span>
    </el-dialog>

	</div>
</template>

<script>
  import left from '../left.vue'
  import top from '../top.vue'
  import footers from '../footer.vue'
  import chuantu2 from '@/components/chuantu2.vue'
	export default {
		name: 'yzhregister',
    components:{
      left,chuantu2,top,footers
    },
		data() {
			return {
        isshowbindsuccess:false,
        isshowbindfail:false,
        nowtype:'',//1注册，2查看
        isshowbindtest:false,
        isnowtest:false,
        upform:{
          site_id:'',
          dealer_id:'',
          broker_id:'',
          app_key:'',
          des_key:'',
          dealer_pub:'',
          yun_pub:''
        },
        user:"",
        failmsg:'',
        isshowinfo:false
			}
		},
		created() {
      this.nowtype = this.$route.query.type
      if(localStorage.getItem('user')){
        this.user = JSON.parse(localStorage.getItem('user'))
        this.upform.site_id = this.user.site_id
      }
      if(this.nowtype==2){
        //查看
        this.getinfo()
      }
		},
		methods: {
        //打开测试
        opentest(){
            if(
              this.upform.dealer_id==''||
              this.upform.broker_id==''||
              this.upform.app_key==''||
              this.upform.des_key==''||
              this.upform.dealer_pub==''||
              this.upform.yun_pub==''
            ){
              
              this.$message.error('信息未填写完整');
              return
            }
           

          axios.post('/own/yunzhifu/bandApiToken',this.upform).then((response)=>{
            if (response.data.msg.code == 0) {
              this.$message({
                message: '信息已保存',
                type: 'success'
              });
              this.isshowbindtest=true
              this.isnowtest=false
              
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        },
        //保存
        baocunpeizhi(){
          this.isnowtest=true
          axios.post('/own/yunzhifu/testApiToken',{
            site_id:this.user.site_id
          }).then((response)=>{
            if (response.data.msg.code == 0) {
              this.isnowtest=false
              this.isshowbindsuccess = true
              this.isshowinfo = true
            } else {
              this.isnowtest=false
              this.isshowbindfail = true
              this.failmsg = response.data.msg.info
              this.$message.error(response.data.msg.info);
            }
          })
          
        } ,
        //确定成功
        successclose(){
          this.isshowbindsuccess = false
          this.isshowbindtest = false
        },
        //获取详情
        getinfo(){
          axios.get('/own/yunzhifu/getApiToken',{
            params:{
              site_id:this.user.site_id
            }
          }).then((response)=>{
            if (response.data.msg.code == 0) {
              console.log('绑定信息')
              console.log(response.data.data)
              this.upform = response.data.data
            } else {
              
              this.$message.error(response.data.msg.info);
            }
          })
        }
		}
	}
</script>

<style scoped>
.t_wen{
  width: 18px;
  height: 18px;
  background-color:#9a9a9a;
  color: white;
  text-align: center;
  line-height: 18px;
  margin-left: 12px;
  border-radius: 50%;
  cursor: pointer;
}
.t_tips{
  font-size: 12px;
  color: #787778;
  margin-top: 10px;
}
/deep/.t_bf_input  .el-input__inner{
border-radius:20px 0 0 20px !important;
}
/deep/.t_bf_input  .el-input-group__append{
border-radius:0px 20px 20px 0px !important;
}
.t_yzh{
  color: #005AFF;
  background-color: #E4EDFF;
  padding: 5px 10px;
  border-radius: 25px;
  font-size: 12px;
  cursor: pointer;
}
.yzh_title{
  width: 140px;
}
.t_item_info{
  margin-bottom: 30px;
}
.t_item_info_tips{
  margin-left: 40px;
  color: #5D5D5D;
  font-size: 14px;
}
.t_usernow{
  cursor: pointer;
}
</style>
<style scoped lang="less">
  .xitongpeizhi{
    .xiugai{background: rgb(228, 237, 255); border-radius: 14px; height: 28px; width: 52px; color: rgb(0, 90, 255); font-size: 12px;}
    /deep/ .t .el-input__inner{ border: 0 !important; padding: 0 !important; height: 50px !important; line-height: 50px !important;}
    /deep/ .tt .el-input__inner{ border: 0 !important;  height: 50px !important; line-height: 50px !important;}
    /deep/ .el-radio{ display: block; margin-bottom: 20px;}
    .t2{
      /deep/ .el-input__inner{ border-radius: 0 !important; border: 0 !important; height: 39px !important; line-height: 39px !important;;}
    }
  }
</style>
